<template>
    <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item style="position: relative;">
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/E859AD0D508E7DDFED0FD91422EE93AF.jpg" alt="">
        <p style="position: absolute;
        top: 50vh;
        left: 5vw;
        font-size: 25px;
        color:white;
        font-weight: bolder;
        padding-left:2vw;
        border-left:5px solid red ;">星云流转 定情缤纷</p>
        <p style="position: absolute;
        color:white;
        top: 55vh;
        left: 8vw;
        font-size: 20px;
        font-weight: bolder;"
        >新品四拼慕斯蛋糕</p>
    </van-swipe-item>
    <van-swipe-item>
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/8BA4D174348FF9FA3826D53F20DE1D4B.jpg" alt="">
    </van-swipe-item>
    <van-swipe-item>
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/5971CB047CFC888CBC1213735E8D330D.jpg" alt="">
    </van-swipe-item>
    <van-swipe-item>
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/8CB6B6C91F802E0C374E5925AC0ED73A.jpg" alt="">
    </van-swipe-item>
    </van-swipe>
    <div class="vip">
      <div class="z1">
        <div>
          <!-- <img src="" alt=""> -->
          <p>尊贵礼遇享不停，升级aha会员</p>
          <p>预计可省￥350＋，<a href="">了解更多</a></p>
          
        </div>
        <button>立即开通 ¥99/年</button>
      </div>
      <div class="z2">
      <img src="https://newimgcdn.lecake.com/h5/images/home/ahaRights_1.png" class="z2" alt="">
      </div>
    </div>
    <div class="card">
      <div class="card1">
        <div>
          <img src="https://newimgcdn.lecake.com/h5/images/home/cashBack/title.png" alt="">
        </div>
        
        <a href=""><img src="https://newimgcdn.lecake.com/h5/images/home/cashBack/btn_more.png" alt=""></a>
      </div>
      <div class="card2">
        <img src="	https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/202104/24207/list_24207.jpg" alt="">
        <div>
          <a href="">
            <span>￥218</span>
          </a>
          <a href="">
            <span>折合0元</span>
          </a>
        </div>
      </div>
    </div>
    <van-swipe class="my-swipe2" :autoplay="3000" indicator-color="white">
    <van-swipe-item style="position: relative;">
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/12F08AF3D97E43B867FEC88FD704637C.jpg" alt="">
        <p style="position: absolute;
        top: 8vh;
        left: 5vw;
        font-size: 20px;
        color:black;
        font-weight: bolder;
        padding-left:2vw;">至臻醇享  经典之作</p>
        <p style="position: absolute;
        color:black;
        top: 12vh;
        left: 7vw;
        font-size: 14px;"
        >国际金奖加冕  口碑 TOP</p>
    </van-swipe-item>
    <van-swipe-item>
        <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/app/8B6406E0A7DB07E5798C5482F937F390.jpg" alt="">
    </van-swipe-item>
    </van-swipe>
    <div class="commodity">
      <p>-蛋糕推荐-</p>
      <ul>
        <li>
          <img src="https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/201212/10800/home_10800.jpg" alt="">
          <div>
          <span>雪域牛乳芝士</span>
          <span>经典之作 热销多年</span>
          </div>
        </li>
          <li>
          <img src="	https://imagecdn.lapetit.cn/postsystem/docroot/images/goods/202208/27284/home_27284.jpg" alt="">
          <div>
          <span>雪域牛乳芝士</span>
          <span>经典之作 热销多年</span>
          </div>
        </li>
      </ul>
    </div>
    <p class="buttom">—— 到底了 ——</p>
    <navigation/>
    </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue'
    export default {
    components: {
      Navigation
    },
    }
</script>


<style lang="scss" scoped>
  .my-swipe .van-swipe-item {
    width: 100vw;
    height: 80vh;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
  }
.vip{
  display: flex;
  padding: 4vh 0;

  .z1{
    width:60vw;
    padding-left: 5vw;
    padding-top: 2vh;
    p{
      padding-top: 10px;
      font-size:0.4rem ;
      a{
        color:  #cea461;
        text-decoration: underline;
      }
    }
    button{
      display: block;
        border: none;
        height: 4vh;
        background: #cda366;
        line-height: 4vh;
        padding: 0 0.16rem;
        color: #ffffff;
        margin-top: 4vh;
    }
  }
  .z2{
    width: 30%;
    img{
      width: 100%;
    }
  }
  }
  .card{
    background-image: url(https://newimgcdn.lecake.com/h5/images/home/cashBack/bg.png);
    display: flex;
    flex-flow: column;
    height: 40vh;
    .card1{
      display: flex;
      justify-content: space-between;
      div img{
        display: inline-block;
        width: 45vw;
        height: 2vh;
        padding:2vh 4vw;
      }
      a{
        img{
          width: 20vw;
          height: 5vh;
          padding-top: 1vh;
        }
      }
    }
    .card2{
      padding-left: 4vw;
      img{
        width: 40vw;
      }
      div{
        display: flex;
        a:nth-child(1){
          display: block;
          span{
            display: block;
            background-color: rgb(133, 133, 133);
            padding: 0.5vh 3vw;
          }
        }
        a:nth-child(2){
          display: block;
          span{
            display: block;
            background-color: rgb(251, 205, 41);
            padding: 0.5vh 7vw;
          }
        }
      }
    }
  }
  .my-swipe2 .van-swipe-item {
    width: 100vw;
    height: 20vh;
  }
  .my-swipe2 .van-swipe-item img{
    width: 100%;
  }
  .commodity{
    p{
      display: block;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0;
      color: #3e3e3e;
    }
    ul{
      display: flex;
      flex-flow: column;
      li{
        position: relative;
        width: 100%;
        height: 32%;
        padding-bottom: 1vh;
        img{
          width: 100%;
        }
        div{
        span:nth-child(1){
        position: absolute;
        top: 3vh;
        left: 3vw;
        font-size: 15px;
        font-weight: bold;
        color:black;
        padding-left:2vw;
        z-index: 1;
        border-left: 8px solid red;
        }
        span:nth-child(2){
        position: absolute;
        top: 6vh;
        left: 5vw;
        font-size: 13px;
        color:black;
        padding-left:2vw;
        z-index: 1;
        }
        }
      }
    }
    
  }
  .buttom{
    display: block;
    // font-weight: bold;
    padding: 10px 0;
    font-size: 16px;
    text-align: center;
    padding: 30px 0 80px;
    color: #3e3e3e;
  }
</style>